import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const ModuleA={

    //外面调用ModuleA中的state：$store.state.a.name
    state:{
        name:'ModuleA中的张三'
    },

    // 外面调用getters和没有module一样调用，多个Modules中getters中不能有相同的方法
    // modules中的getters函数可以有三个参数，函数（state，getters，rootState），其中前两个参数表示自己模块本身的数据
    // 第三个参数rootState表示最外层中的state，比如最外层中的state有rootcount，rootState.rootcount就等于100
    getters:{
        fullName(state){
            return state.name+'哈哈哈哈'
        }
    },

    // 外面调用updateName：this.$store.commit('updateName')
    // 和没有module一样调用，只是要注意，多个模块中的mutations中的方法不能重复
    // 即ModuleA中mutations中有updateName方法，ModuleB中mutations中就不能再有updateName方法了
    mutations:{
        updateName(state){
            state.name='修改ModuleA中的张三'
        }
    },

    // 外面调用和没有module一样，只是注意，模块中函数的Context表示的是模块本身，所以调用的也是模块内的方法
    // 模块内的context，不仅有commit方法，同时可以访问模块外的根中的内容，rootState,rootGetters等
    // 采用es6中对象解构，aupdatName（{commit,state,rootState,rootGetters}）
    actions:{
        aupdatName(context){
            console.log(context)
            setTimeout(() => {
                context.commit('updateName')
            }, 2000);
        }
    }
}


const ModuleB={
    state:{
        name:'ModuleB中的李四'
    },
    getters:{

    },
    mutations:{

    },
    actions:{
        
    }
}

//除了state，可以将其他getters、mutations等抽离出去为一个单独的文件
export default new Vuex.Store({
    state:{
        rootcount:100
    },
    getters:{

    },
    modules:{
        a:ModuleA,
        b:ModuleB
    }
})